<template>
	<view class="bg-w pt40">
		<view class="plr30">
			<view class="exchange-box" :style="exchangeBg">
				<view v-if="isLogin" class="exchange-box-h pd40 text-w flex alcenter space">
					<view>
						<view class="ft16 opacity8">当前可用积分</view>
						<view class="flex alcenter mt30">
							<image class="wh20" :src="'icon_diamond'"></image>
							<text class="ft18 ftw600 ml10">2000</text>
						</view>
					</view>
					<view class="flex alcenter space">
						<navigator url="/pages/member/integral/log">
						<view class="text-center">
							<view class="iconfont icon_integral_detail ft24"></view>
							<view class="ft14 mt20">积分明细</view>
						</view>
						</navigator>
						<view class="h-line ml40 mr40"></view>
						<navigator url="/pages/member/integral/exchange">
						<view class="text-center">
							<view class="iconfont icon_integral_record ft24"></view>
							<view class="ft14 mt20">兑换记录</view>
						</view>
						</navigator>
					</view>
				</view>
				<view v-else class="exchange-box-h flex alcenter pd40">
					<image class="exchange-member-face" :src="''"></image>
					<view class="text-w ml40">
						<text class="ft18 ftw600">登录／注册</text>
						<text class="iconfont iconbtn_arrowr ml10"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="mt20">
			<unio2o-tab @select="selectAct" :tabs="tabs" :selectIndex="selectIndex"></unio2o-tab>
		</view>
		<swiper class="exchange-main" :current="selectIndex" @change="selectSwiper" :autoplay="false" :indicator-dots="false">
			<swiper-item>
				<scroll-view class="exchange-main-h" :scroll-y="true">
					<view class="pd30 flex space wrap">
						<view class="goods-item">
							<unio2o-integral-goods></unio2o-integral-goods>
						</view>
						<view class="goods-item">
							<unio2o-integral-goods></unio2o-integral-goods>
						</view>
						<view class="goods-item">
							<unio2o-integral-goods></unio2o-integral-goods>
						</view>
						<view class="goods-item">
							<unio2o-integral-goods></unio2o-integral-goods>
						</view>
						<view class="goods-item">
							<unio2o-integral-goods></unio2o-integral-goods>
						</view>
						<view class="goods-item">
							<unio2o-integral-goods></unio2o-integral-goods>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view class="exchange-main-h" :scroll-y="true">
					<view class="pd30">
						<view class="mb50">
							<unio2o-tuan-integral></unio2o-tuan-integral>
						</view>
						<view class="mb50">
							<unio2o-tuan-integral></unio2o-tuan-integral>
						</view>
						<view class="mb50">
							<unio2o-tuan-integral></unio2o-tuan-integral>
						</view>
					</view>					
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view class="exchange-main-h" :scroll-y="true">
					<view class="pd30">
						<view class="mb50">
							<unio2o-coupon-integral></unio2o-coupon-integral>
						</view>
						
						<view class="mb50">
							<unio2o-coupon-integral :showStore="false"></unio2o-coupon-integral>
						</view>
					</view>	
				</scroll-view>	
			</swiper-item>
		</swiper>
		
		
	</view>
</template>

<script>
	import unio2oTab from '@/components/base/tab/tab.vue';
	import unio2oIntegralGoods from '@/components/module/goods/integral.vue';
	import unio2oTuanIntegral from '@/components/module/tuan/integral.vue';
	import unio2oCouponIntegral from '@/components/module/coupon/integral.vue';
	export default{
		components:{
			unio2oTab,
			unio2oIntegralGoods,
			unio2oTuanIntegral,
			unio2oCouponIntegral
		},
		computed:{
			exchangeBg(){
				return 'background-color:#9D65C9;';
			}
		},
		data(){
			return {
				isLogin:true,
				selectIndex:0,
				tabs:[
					{name:'商品'},
					{name:'抢购'},
					{name:'优惠券'}
				],
			}
		},methods:{
			selectAct(e){
			   let index = parseInt(e);
			   this.selectIndex = index;		
			},
			selectSwiper(e){
				this.selectIndex = e.detail.current;
			}
		}
	}
</script>

<style>
.h-line{
	height: 120rpx;
	width: 2rpx;
	background: rgba(255,255,255,.1);
}
.exchange-member-face{
	width:120rpx;
	height: 120rpx;
	border-radius: 60rpx;
}
.goods-item{
	width: calc(50% - 15rpx);
	margin-bottom: 30rpx;
}
.exchange-box-h{
	height: 200rpx;
}
.exchange-box{
	width:100%;
	height: 200rpx;
	box-shadow:0rpx 12rpx 12rpx -4rpx rgba(252,114,107,0.2);
	overflow: hidden;
	border-radius: 16rpx;
}	
.exchange-main-h{
	height: calc(100vh - 340rpx);
}
.exchange-main{
	height: calc(100vh - 340rpx);
	width: 100%;
}
</style>